<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-24 14:08:47
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-27 13:51:26
-->
<template>
  <BasicModal v-bind="$attrs" @ok="handleOk" @register="register" title="修改员工">
    <!-- 表单信息 -->
    <BasicForm class="p-4" @register="formRegister" />
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { EditSchemas } from './modal.data';
import { updateStaff } from '/@/api/staff';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
import { useMessage } from '/@/hooks/web/useMessage';
import {
  UpdateStaffState,
} from '/@/api/staff/model/staffModel';
// 弹框的数据记录
const record = ref({
  record:{},
  reload: () => { }
})

// 
const [formRegister, { getFieldsValue, setFieldsValue }] = useForm({
  schemas: EditSchemas,
  layout: 'vertical',
  showActionButtonGroup: false,
  actionColOptions: {
    span: 24
  }
});
//  初始化弹框信息
const callback = (data) => {
  // 初始化表单 
  record.value = data
  setFieldsValue(data.record)
}
const [register, { closeModal,changeOkLoading }] = useModalInner(callback);


// 更改信息
const handleOk = () => {
  let param = {
    userId: record.value.record.store_user_id,
    form: getFieldsValue()
  } as UpdateStaffState
  changeOkLoading(true)
  const { createMessage } = useMessage();
  updateStaff(param).then(() => {
    createMessage.success("修改成功");
    record.value.reload()
    closeModal();
  }).catch(() => {
    createMessage.error("修改失败");
  }).finally(()=>{
    changeOkLoading(false)
  })

}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}
</style>